<template>
    <div id="content">
        <div class="thead">
            <div>编号</div>
            <div>车牌号</div>
            <div>停车时长</div>
            <div>入场时间</div>
            <div>出场时间</div>
            <div>应收金额</div>
            <div>支付方式</div>
            <div>操作</div>
        </div>
        <div class="tr" v-for="item in list" :key="item.id">
            <div>{{item.id}}</div>
            <div>{{item.车牌号}}</div>
            <div>{{item.停车时长}}</div>
            <div>{{item.入场时间}}</div>
            <div>{{item.出场时间}}</div>
            <div>{{item.应收金额}}</div>
            <div>{{item.支付方式}}</div>
            <div>
                <i class="el-icon-edit"  @click="getchange(item)"></i>
                &nbsp;&nbsp;
                <i class="el-icon-delete-solid"  @click="delbtn(item.id)"></i>
            </div>
        </div>
        <div class="page">
          <my-page
        @changePage="changePage"
        @changepageSize="changepageSize"
        :page="page"
        :pageSize="pageSize"
        :total="total"
        id="delog"
        >
        </my-page>

        </div>
        
        <!-- v🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗🚗 -->
        <el-dialog
        title="修改当前数据"
        :visible.sync="dialogVisible"
        width="40%"
        id="dialog"
        :before-close="handleClose">
        <span>id:{{currentmsg.id}}</span>
        <div>
            <span>支付方式</span>
            <input type="text" name="支付方式" v-model="currentmsg.支付方式" placeholder="支付方式">
            
        </div>
        <div>
            <span>路段编号</span>
            <input type="text" name="路段编号" disabled v-model="currentmsg.路段编号" placeholder="路段编号">
            
        </div>
        <div>
             <span>收费员编号</span>
            <input type="text" name="收费员编号" v-model="currentmsg.收费员编号" placeholder="收费员编号">
           
        </div>
        <div>
             <span>收费员</span>
            <input type="text" name="收费员" v-model="currentmsg.收费员" placeholder="收费员">
           
        </div>
        <div>
              <span>车牌号</span>
            <input type="text" name="车牌号" v-model="currentmsg.车牌号" placeholder="车牌号">
          
        </div>
        <div>
            <span>应收金额</span>
            <input type="number" name="应收金额" v-model="currentmsg.应收金额" placeholder="应收金额">
            
        </div>
        <div >
            <span>路段地址</span>
            <span>原地址：{{currentmsg.路段地址}}</span>
            <el-cascader
                id="address"
                v-model="value"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"></el-cascader>
                 
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
        </el-dialog>
    </div>
    
</template>

<script>
import axios from 'axios'
import MyPage from "./MyPage.vue"
import SelectTime from "./SeltctTime.vue"
import addressmsg from "./Data/address.json"
import * as echarts from 'echarts';
export default {
     components:{
        MyPage,
        SelectTime
     },
    mounted(){
        this.renderall()
    },
    methods: {
      renderall(){
            axios.get('http://182.61.148.161:3000/user/eachpage',{params:{skip:this.skip,size:this.size}}).then(res=>{
                this.list=res.data
                console.log(res)
            }).then(console.log("触发了"))
        },
        render(n){
            this.list=n
        },
        delbtn(n){
            axios.get("http://182.61.148.161:3000/user/del",{
                params:{
                    id:n
                }
            }).then(res=>{
                res.data
            }).then(this.renderall()).then(this.deletesuccess()).then(this.$children[0].getdataNumber())
        },
         handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getchange(n){
        this.dialogVisible=true
        // console.log(n);
        this.currentmsg.id=n.id
        this.currentmsg.车牌号=n.车牌号
        this.currentmsg.停车时长=n.停车时长
        this.currentmsg.入场时间=n.入场时间
        this.currentmsg.出场时间=n.出场时间
        this.currentmsg.应收金额=n.应收金额
        this.currentmsg.收费员=n.收费员
        this.currentmsg.收费员编号=n.收费员编号
        this.currentmsg.路段编号=n.路段编号
        this.currentmsg.路段地址=n.路段地址
        this.currentmsg.支付方式=n.支付方式
      },
       handleChange(value) {
        console.log(value)
      },
      getaddresscode(m){
        let adddresscode=""
        m.forEach(item=>{
            adddresscode+="-"+item
        })
       adddresscode=adddresscode.substring(1)
        return adddresscode
      },
      getchangeaddress(value){
        console.log(value);
        let addressarr=this.getaddress(value)
        this.currentmsg.路段地址=addressarr[0]+" "+addressarr[1]+" "+addressarr[2]
        this.currentmsg.路段编号=this.getaddresscode(value)
       console.log(this.currentmsg.路段编号,this.currentmsg.路段地址);
      },
      confirm(){
        this.dialogVisible=false
        let addressarr=this.getaddress(this.value)
         this.currentmsg.路段编号=this.getaddresscode(this.value)
        this.currentmsg.路段地址=addressarr[0]+" "+addressarr[1]+" "+addressarr[2]
        console.log(this.currentmsg)
        this.update()
      },
      update(){
        axios.get("http://182.61.148.161:3000/user/update",{
            params:this.currentmsg
        }).then(this.value=[]).then(this.changesuccess()).then(this.renderall())
      },
      getaddress(value){
             return   value.map(item=>{
                for(let val of addressmsg){
                    if(val.value==item){
                        addressmsg=val.children
                        return val.label
                    }
                }
            })
        },
         deletesuccess() {
        this.$message({
          message: '删除数据成功！',
          type: 'success'
        });
      },
      changesuccess() {
        this.$message({
          message: '修改数据成功！',
          type: 'success'
        });
      },
      text(){
        console.log(this.pageSize);
      },
      changePage(val){
       this.page = val
       this.skip=(this.page-1)*this.pageSize
        this.size=this.pageSize
       console.log(this.skip,this.size);
       this.renderall()
    },
     changepageSize(val){
      // 控制pageSize切换
      this.pageSize = val
      this.skip=(this.page-1)*this.pageSize
        this.size=this.pageSize
      console.log(this.page,this.pageSize);
      this.renderall()
    },
    },
    // vv✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂✈🪂✈✈✈✈🪂
    data() {
      return {
        skip:0,
        size:20,
        list:[],
        page:1,
        pageSize:20,
        total:0,
        pageSizes:[20,40,60,80,100],
        dialogVisible: false,
        currentmsg:{
            id:null,
            "车牌号":"",
            "停车时长":null,
            "入场时间":null,
            "出场时间":null,
            "应收金额":null,
            "收费员":"",
            "收费员编号":null,
            "路段编号":null,
            "路段地址":"",
            "支付方式":""
        },
          value: [],
         options:addressmsg
      };
    },
  }
</script>

<style scoped>
    #content{
        width: 100%;
        margin-top: 10px;
    }

    .thead{
        height: 50px;
        border-radius: 5px; 
        background-color: #f0f8ff8a;
        display:flex;
        align-items: center;
        justify-content: space-around;
        box-shadow: 2px 2px 2px #5859592b;
    }

    .thead>div{
        width: 100px;
        text-align: center;
    }
    .tr{
        height: 50px;
        border-radius: 5px; 
        background-color: #f0f8ff8a;
        display:flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 10px;
        box-shadow: 2px 2px 2px #5859592b;
    }
    .tr>div{
        text-align: center;
        width: 100px;
    }
    .tr>div:nth-child(6){
        color:rgb(231 188 10);
    }

    .block>.demonstration{
        color: transparent;
    }
     .block>:last-child{
         padding: 2px 5px 10px 720px;
     }
     .el-icon-edit,.el-icon-delete-solid{
        cursor: pointer;
     }
     #dailog{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     }

     #dialog .el-dialog__body{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
     }
      #dialog .el-dialog__body>div{
        height: 50px;
       display: flex;
       align-items: center;
       justify-content: space-between;
      }
      #dialog .el-dialog__body>div>span{
        height: 30px;
        line-height: 30px;
      }
     #dialog .el-dialog__body>div>input{
        margin-right:0;
        width: 450px;
        height: 30px;
     }
     .page{
      height: auto;
     }
     #viewmap{
      width: 100%;
      height: 500px;
     }
</style>